<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300&subset=latin,vietnamese">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300' rel='stylesheet' type='text/css'>
<title>Dai Hoc Bach Khoa</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/mobile.css" rel="stylesheet">
<link href="css/slide.css" rel="stylesheet">
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen">

<link href="css/jquery.dynatable.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/detection.js"></script>
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/jquery.dynatable.js"></script>

<script>
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
</script>

<script>
var series_data = [{
    name: 'Số SV', //neu co nhieu series thi dung
    data: [107, 31, 635, 203, 0]
}];
var categories_data = ['Toán 1', 'Kỹ thuật lập trình', 'Mạng máy tính', 'Trình biên dịch', 'Khai phá dữ liệu'];
var type_chart = "bar"; // "column";

$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------
    

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    {
        var data = null;
        //process data 

        //view data
        viewData(null);
    }
}

function viewData(data) {
    createTable();

    $("#ketqua_container").show();
    //---draw-chart---
    drawChart();

    //---show------
    
}

function createTable() {
    //create tbl
    var tblid = "table_container";
    var html = '<table id="' + tblid + '" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th>Môn học</th>';
    html+= '       <th>Số sinh viên</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    html+= '    <tr>';
    html+= '      <td>CNTT</td>';
    html+= '      <td>300</td>';
    html+= '     </tr>';
    html+= '     <tr>';
    html+= '      <td>DDT</td>';
    html+= '      <td>500</td> ';
    html+= '    </tr>';
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    //markup table
    $('#table_container1').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}
function drawChart() {
    $('#chart_container').highcharts({
        chart: {
            type: type_chart
        },
        title: {
            text: 'Tình hình đăng ký môn học'
        },
        subtitle: {
            text: 'Khoa Khoa học và kỹ thuật máy tính'
        },
        xAxis: {
            categories: categories_data,
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Số SV',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: '' //don vi 
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            //layout: 'horizontal', //'vertical'
            //align: 'right',
            //verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: series_data
    });
}

function export_excel() {
    tableToExcel('table_container', 'baocao', 'baocao-dkmh-1.xls');
}

var tableToExcel = (function () {
    var uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    return function (table, name, filename) {
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

        document.getElementById("dlink").href = uri + base64(format(template, ctx));
        document.getElementById("dlink").download = filename;
        document.getElementById("dlink").click();

    }
})();

</script>

</head>
<body>
<!-- Top header ---->
<div class="top_header">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
      	<img class="deskop_logo" src="images/logo.png" style="max-width:70%">
        <img class="medium_logo" src="images/m1logo.png">
        <img class="mobile_logo" src="images/mlogo.png">
      </a>
    </div>

    <div style="height:49px"></div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right menu_top">
      
        <li class="menu_top_con"><a  href="#">Đăng ký môn học</a></li>
        <li class="menu_top_con"><a class="active" href="#">Tuyển sinh</a></li>
        <li class="menu_top_con"><a href="#">Giảng dạy</a></li>
        <li class="menu_top_con"><a href="#">Tài chính</a></li>

        

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
</div>
<!-- end Top header ---->
<!-- Breadcrumbs ---->
<div class="breadcrumbs_wapper">
<div class="container">
	<div class="row">
    	<div class="col-md-9">
        	<nav>
            <ul>
                <li><a href="index.html">Đăng ký môn học</a> </li>
                <li>Sinh viên đăng ký</li>
            </ul>
        	</nav>
        </div>

        <div class="col-md-3">
        	<div class="login-navi">
                <a href="#">Đăng ký</a> / 
                <a href="#">Đăng nhập</a>
            </div>
        </div>
    </div>
</div>
</div>
<!-- End Breadcrumbs ---->

<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu ---->
<div class="col-md-3 student_wp">
	<div class="categories">
                        <ul>
                            <li>
                                <a href="#">Sinh viên đăng ký</a>
                               <!-- <ul class="submenu" style="display: none;">
                                    <li><a href="#">Thông báo</a></li>
                                    <li><a href="#">Sổ tay sinh viên</a></li>
                                    <div class="clear"></div>
                                </ul>-->
                            </li>
                            <li>
                                <a href="#">Biểu đồ 1</a>
                            </li>
                        </ul>
                    </div>
	<!-- category -->
    <!--<div class="lienket padding">
    	<select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
    </div>-->
    <div class="link_image"><a href="#"><img src="images/pic04.png"></a></div>
</div>

<div class="col-md-9">
	<div class="row padding_notop">
    <div class="col-md-8">
        <div class="head_title small_font">
            <h4>Báo cáo tình hình đăng ký môn học của từng KHOA theo Học Kỳ</h4>
        </div>
    </div>
    

    <div class="clear"></div>
</div>

<div class="sinhvien_wapper" style="">
    
    <!--table-->
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Học kỳ</label>
    	<select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    <div class="khoa-filter col-md-4" >
        <label >Khoa/Ngành</label>
    	<select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
    </div>
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    <div id="data_container">
    <table id="table_container" class="table">
      <thead>
        <tr>
          <th>Khoa</th>
          <th>Số sinh viên</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>CNTT</td>
          <td>300</td>
        </tr>
        <tr>
          <td>DDT</td>
          <td>500</td>
         
        </tr>
        <tr>
          <td>XD</td>
          <td>200</td>
        </tr>
      </tbody>
    </table>
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
    </div>
    <div id="chart_container"></div>
    </div>

    </div>
</div>

    <!--
    <div class="head_title small_font padding_notop">
        <h3>dịch vụ</h3>
    </div>
    <div class="service-items">
                            <div class="service-item">
                                <h3>BÁCH KHOA E-LEARNING</h3>
                            </div>
                            <div class="service-item">
                                <h3>SÀN HOẠT ĐỘNG SINH VIÊN</h3>
                            </div>
                            <div class="service-item">
                                <h3>DIỄN ĐÀN  ĐÀO TẠO</h3>
                            </div>
                            <div class="service-item">
                                <h3>EMAIl SINH Viên</h3>
                            </div>
                            <div class="service-item">
                                <h3>đăng ký in bảng điểm</h3>
                            </div>
                            <div class="service-item">
                                <h3>ĐĂNG KÝ XÉT  CCAV</h3>
                            </div>
                            <div class="service-item">
                                <h3>đăng ký môn học</h3>
                            </div>
                        </div>

    -->
</div>


</div>
</div>
</div>
<!-- end Content ---->
<!-- Footer ---->
<div class="footer_wapper">
<div class="container">
<div class="row">
	<div class="col-md-6">
    	<div class="copyright">
        	<span>Copyright@2014. Phòng Đào tạo - Đại học Bách Khoa TPHCM.</span>
        </div>
    </div>
    <div class="col-md-6">
    	<div class="social-list-block">
                    <ul>
                        <li><a class="facebook" href="#">facebook</a>
                        </li>
                        <li><a class="pintrest" href="#">pintrest</a>
                        </li>
                        <li><a class="google" href="#">google</a>
                        </li>
                        <li><a class="twitter" href="#">twitter</a>
                        </li>
                        <li><a class="linkedin" href="#">linkedin</a>
                        </li>
                    </ul>
                </div>
    	</div>
</div>
</div>
</div>
<!-- end footer ---->
<!-- plugins javascript -->
<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/utils.js"></script>

<!-- components javascript -->
<script type="text/javascript" src="js/components/kSelectBox.js"></script>
<script type="text/javascript" src="js/components/kSlide.js"></script>

<!-- running javascript -->
<script type="text/javascript" src="js/controls.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<script>
$("ul.control-slider").hide();
$( ".edu-slider-block" ).mouseenter(function() {
$("ul.control-slider").show();
}).mouseleave(function() {
  $("ul.control-slider").hide();
});
</script>
</body>
</html>